import { Row, Col, Form, Input, Button, Select, Card, Spin } from 'antd';
import { signup } from '@/services/auth';
import { useRequest, useNavigate, Link } from '@umijs/max'
function SignUp() {
    const navigate = useNavigate();
    const { loading, run } = useRequest(signup, {
        manual: true,//手工触发
        onSuccess() {//注册成功后跳转到登录页进行登录
            navigate('/signin');
        }
    });
    const onFinish = (values) => {
        run(values);//手工触发signup,进行真正的注册
    }
    return (
        <Row className='h-screen bg-gray-200' align='middle'>
            <Col offset={8} span={8}>
                <Card title="请注册" extra={<Link to="/signin">去登录</Link>}>
                    <Spin spinning={loading}>
                        <Form
                            onFinish={onFinish}
                            labelCol={{ span: 4 }}
                            wrapperCol={{ span: 20 }}
                        >
                            <Form.Item
                                label="用户名"
                                name="username"
                                rules={[{ required: true, message: '请输入用户名' }]}>
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '请输入密码' }]}>
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="手机号"
                                name="phone"
                                rules={[{ required: true, message: '请输入手机号' }]}>
                                <Input />
                            </Form.Item>
                            <Form.Item
                                label="角色"
                                name="access"
                                rules={[{ required: true, message: '请输入角色' }]}>
                                <Select>
                                    <Select.Option value="root">超级管理员</Select.Option>
                                    <Select.Option value="admin">管理员</Select.Option>
                                    <Select.Option value="member">普通用户</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit">提交</Button>
                            </Form.Item>
                        </Form>
                    </Spin>
                </Card>
            </Col>
        </Row>
    )
}

export default SignUp;